{{diagnostic}}
<div class="container" [hidden]="submitted">
  <h1>Hero Form</h1>
  <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label form="name">Name</label>
      <input type="text"  class="form-control input-sm" id="name" required
        [(ngModel)]="model.name" name="name" #spy
        #name="ngModel"/>
      <br />TODO: remove this: {{spy.className}}
      <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
        Name is required
      </div>
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text" class="form-control input-sm" id="alterEgo"
        [(ngModel)]="model.alterEgo" name="alterEgo"/>
    </div>

    <div class="form-group">
      <label for="power">Hero Power</label>
      <select class="form-control input-sm" id="power" required
        [(ngModel)]="model.power" name="power" #power="ngModel">
        <<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
      <div [hidden]="power.valid || power.pristine" class="alter alter-danger">
        Power is required
      </div>
    </div>
    <button type="submit" class="btn btn-xs btn-success"
      [disabled]="!heroForm.form.valid">
      Submit
    </button>
    <button type="button" class="btn btn-xs btn-success"
      (click)="newHero(); heroForm.reset();">
      New Hero
    </button>
  </form>
</div>

<div [hidden]="!submitted">
  <h2>You submitted the following:</h2>
  <div class="row">
    <div class="col-xs-3"> Name </div>
    <div class="col-xs-9 pull-left">
      {{ model.name}}
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      AlterEgo
    </div>
    <div class="col-xs-9 pull-left">
      {{ model.alterEgo }}
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      Power
    </div>
    <div class="col-xs-9 pull-left">
      {{ model.power }}
    </div>
  </div>
  <br />
  <button class="btn btn-primary btn-sm" (click)="submitted=false">Edit</button>
</div>
